<template>
  <div class="gradient-bg">
    <div class="login-box">
      <div class="login-header">注册</div>
      <el-form :model="loginForm" ref="loginFormRef" :rules="loginFormRules" class="form-content">
        <el-form-item prop="username" style="margin-bottom: 20px">
          <el-input type="text" v-model.trim="loginForm.username" placeholder="用户名"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password"
                    v-model.trim="loginForm.password"
                    :show-password="true"
                    placeholder="密码"
                    @keyup.enter="handleLogin"
          />
        </el-form-item>

        <div class="login-button" @click="handleLogin">注册</div>
      </el-form>

    </div>
  </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
import {registUser, validUserExist} from "@/api/sysFileInfo/sysFileInfo"
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import {HOME_PATH} from "@/const/RouterPathConst";
import {loginFormRules} from "@/hooks/login/loginRegex";

onMounted(async () => {
  //只允许注册一个用户
  await validUserExist();
})

const loginForm = ref({})
const $router = useRouter()

const loginFormRef = ref();

const handleLogin = async () => {
  await loginFormRef.value.validate();
  registUser(loginForm.value.username, loginForm.value.password).then(resp => {
    if (resp.code === "200") {
      ElMessage.success("注册成功");
      setTimeout(() => $router.push(HOME_PATH), 500)
    }
  })
}


</script>
<style scoped>
.gradient-bg {
  height: 100vh; /* 使用视口高度 */
  background-image: url("@/assets/images/bg.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-box {
  background-color: #fff;
  width: 90%; /* 使用百分比 */
  max-width: 358px; /* 设置最大宽度 */
  border-radius: 15px;
  padding: 20px; /* 增加内边距 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.login-header {
  font-size: 28px; /* 调整字体大小 */
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px; /* 增加下边距 */
}


.login-button {
  text-align: center;
  padding: 12px; /* 增加内边距 */
  margin-top: 20px;
  background-color: #40a9ff;
  color: #fff;
  border-radius: 8px;
  cursor: pointer; /* 添加光标样式 */
  letter-spacing: 2px;
}
.login-button:hover{
  opacity: 0.8;
}
.login-button:active{
  background-color: #2183ee;
}
.message {
  text-align: center;
  margin-top: 20px; /* 调整边距 */
}

a {
  text-decoration-line: none;
  color: #abc1ee;
}
</style>